﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery图片文件批量上传队列代码</title>
    <link rel="stylesheet" href="easy-upload.css">
</head>
<body>
<div id="easyContainer"></div>
<script type="text/javascript" src="vendor/jquery.min.js"></script>
<!-- 视实际需要决定是否引入jquery.cookie-1.4.1.min.js-->
<!-- <script type="text/javascript" src="vendor/jquery.cookie-1.4.1.min.js"></script> -->
<script type="text/javascript" src="easyUpload.js"></script>
<script type="text/javascript">
    $('#easyContainer').easyUpload({
        allowFileTypes: '*.jpg;*.git;*.png;*.srt;*.lrc;*.mp3',//允许上传文件类型
        allowFileSize: 100000,//允许上传文件大小(KB)
        selectText: '选择文件',//选择文件按钮文案
        multi: true,//是否允许多文件上传
        multiNum: 10,//多文件上传时允许的文件数
        showNote: true,//是否展示文件上传说明
        note: '最多上传10个文件, 支持图片、mp3、lrc、srt',//文件上传说明
        showPreview: true,//是否显示文件预览
        url: 'api/file/upload',//上传文件地址
        fileName: 'file',//文件filename配置参数
        formParam: {
            // token: $.cookie('token_cookie')//不需要验证token时可以去掉
        },//文件filename以外的配置参数，格式：{key1:value1,key2:value2}
        timeout: 30000,//请求超时时间
        successFunc: function (res) {
            console.log('成功回调', res);
        },//上传成功回调函数
        errorFunc: function (res) {
            console.log('失败回调', res);
        },//上传失败回调函数
        deleteFunc: function (res) {
            console.log('删除回调', res);
        }//删除文件回调函数
    });
</script>

</body>
</html>